<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-bottom: 20px;
        }
        .red{
            color:red;
        }
        .blue{
            color:blue;
        }
        .green{
            color:green;
        }
    </style>
</head>
<body>
    <div id="app">
            <h3>比较结果</h3>
            <div v-if="number1 && number2 != ''">
                <div v-if="number1 < number2">
                    {{number1}} < {{number2}}
                </div>
                <div v-else-if="number1 = number2">
                    {{number1}} = {{number2}}
                </div>
                <div v-else="number1 > number2">
                    {{number1}} > {{number2}}
                </div>
            </div>
            <div>
               数字一： <input type="number"  v-model.number="number1">
            </div>
            <div>
                数字二： <input type="number"  v-model.number="number2">
            </div>
    </div>

    <div id="app2">
        <div>
            <input type="checkbox" value="我" v-model="text"> 我
            <input type="checkbox" value="中" v-model="text"> 中
            <input type="checkbox" value="你" v-model="text"> 你
            <input type="checkbox" value="国" v-model="text"> 国
            <input type="checkbox" value="欢" v-model="text"> 欢
            <input type="checkbox" value="爱" v-model="text"> 爱
            <input type="checkbox" value="喜" v-model="text"> 喜
            <input type="checkbox" value="在" v-model="text"> 在
            <input type="checkbox" value="。" v-model="text"> 。
            <input type="checkbox" value="！" v-model="text"> ！
        </div>
        <div>
            {{text.join('')}}
        </div>

    </div>
    <div id="app3">
        <div>
            <h2 :class="color">"美好的时光总是短暂的"</h2>
        </div>
        <div>
            <h4>为上面这句话选择颜色</h4>
        </div>
        <div>
            <select v-model="color">
                <option value="">默认</option>
                <option value="green">绿色</option>
                <option value="red">红色</option>
                <option value="blue"> 蓝色</option>
            </select>
        </div>
    </div>

<script src="js/vue.min.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            number1:'',
            number2:'',
        },
        methods: {}
    });
    new Vue({
       el: '#app2',
       data: {
           text: [],
       },
        methods:{}
    });
    new Vue({
        el: '#app3',
        data:{
            color:'',
        }
    })

</script>
</body>
</html>